<template>
	<view class="add_con">
		<view class="add" @click="toggleChoice">+</view>
		<view class="choice" v-if="isShowChoice">
			<!-- 添加好友 -->
			<view class="addFriend" @click="handleClick('addFriend')" @longpress="handleLongPress('addFriend')"
				:class="{ 'active': activeItem === 'addFriend' }">
				添加好友</view>
			<!-- 添加群聊 -->
			<view class="addGroud" @click="handleClick('addGroud')" @longpress="handleLongPress('addGroud')"
				:class="{ 'active': activeItem === 'addGroud' }">
				添加群聊</view>
			<!-- 加入群聊 -->
			<view class="enterGroup" @click="enterGroup('addGroud')" @longpress="handleLongPress('enterGroup')"
				:class="{ 'active': activeItem === 'enterGroup' }">
				加入群聊</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const isShowChoice = ref(false)
	const activeItem = ref()

	const toggleChoice = () => {
		isShowChoice.value = !isShowChoice.value;
	}

	// 点击事件
	const handleClick = (item) => {
		activeItem.value = item;
		if (item === 'addFriend') {
			uni.navigateTo({
				url: '/pages/addFriend/addFriend'
			})
			activeItem.value = '';
		} else if (item === 'enterGroup') {
			uni.navigateTo({
				url: '/pages/enterGroup/enterGroup'
			})
		} else if (item === 'addGroud') {
			uni.navigateTo({
				url: '/pages/addGroud/addGroud'
			})
		}
	};

	// 长按事件
	const handleLongPress = (item) => {
		activeItem.value = item;
		// 这里可以添加长按后的业务逻辑
	};
</script>

<style lang="scss">
	.add_con {

		.add {
			// float: right;
			width: 132rpx;
			color: skyblue;
			font-size: 60rpx;
			text-align: center;

		}

		.choice {
			float: right;
			height: 110rpx;
			width: 130rpx;
			border: 1rpx solid lightsteelblue;



			view {
				// float: right;
				font-size: 20rpx;
				color: white;
				height: 50rpx;
				border: 1px solid #fff;
				line-height: 50rpx;
				text-align: center;
			}

			.addFriend {
				// float: right;
				border-bottom: 1rpx solid lightsteelblue;
				background-color: #8d8d8d;
			}

			.addGroud {
				background-color: #8d8d8d;
			}

			.active {
				background-color: lightblue; // 可根据需求修改背景颜色
			}


		}

	}
</style>